﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Wijmo Example Page</title>
	<link href="Wijmo-Complete/development-bundle/themes/aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet"
		type="text/css" />
	<link href="Wijmo-Open/css/jquery.wijmo-open.0.8.2.css" rel="stylesheet"
		type="text/css" />
	<link href="Wijmo-Complete/css/jquery.wijmo-complete.0.8.2.css" rel="stylesheet"
		type="text/css" />
	<script type="text/javascript" src="Wijmo-Open/development-bundle/external/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="Wijmo-Open/development-bundle/external/jquery-ui-1.8.6.custom.min.js"></script>
	<script type="text/javascript" src="Wijmo-Open/development-bundle/external/jquery.bgiframe-2.1.3-pre.js"></script>
	<script type="text/javascript" src="Wijmo-Open/development-bundle/external/jquery.glob.min.js"></script>
	<script type="text/javascript" src="Wijmo-Complete/development-bundle/external/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="Wijmo-Complete/development-bundle/external/raphael.js"></script>
	<script type="text/javascript" src="Wijmo-Complete/development-bundle/external/raphael-popup.js"></script>
	<script src="Wijmo-Open/js/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
	<script src="Wijmo-Complete/js/jquery.wijmo-complete.0.8.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			//Grid
			$("#grid").wijgrid({
				allowSorting: true,
				allowPaging: true,
				pageSize: 10
			});

			//BarChart
			$("#wijbarchart").wijbarchart({
				stacked: true,
				showDefaultChartLabels: false,
				header: {
					text: "Stacked bar chart"
				},
				seriesList: [{
					label: "John",
					legendEntry: true,
					data: { x: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], y: [5, 3, 4, 7, 2] }
				}, {
					label: "Jane",
					legendEntry: true,
					data: { x: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], y: [2, 2, 3, 2, 1] }
				}, {
					label: "Joe",
					legendEntry: true,
					data: { x: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], y: [3, 4, 4, 2, 5] }
				}]
			});

			//PieChart
			$("#wijpiechart").wijpiechart({
				showDefaultChartLabels: false,
				radius: 140,
				header: {
					text: "Pie Chart"
				},
				hint: {
					formatter: function () {
						return this.data.label + " : " + $.format(this.value / this.total, "p2");
					}
				},
				seriesList: [{
					label: "Firefox",
					legendEntry: true,
					data: 45.0,
					offset: 0
				}, {
					label: "IE",
					legendEntry: true,
					data: 26.8,
					offset: 0
				}, {
					label: "Chrome",
					legendEntry: true,
					data: 12.8,
					offset: 20
				}]
			});

			//LineChart
			$("#wijlinechartDefault").wijlinechart({
				hint: {
					formatter: function () {
						return this.data.lineSeries.label + '\n' +
						this.x + ': ' + this.y + '°C';
					}
				},
				seriesList: [
					{
						label: "Tokyo",
						legendEntry: true,
						fitType: "spline",
						data: {
							x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
						'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
							y: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
						},
						markers: {
							visible: true,
							type: "circle"
						}
					}
				]
			});

			//Menu
			$("#menu1").wijmenu({
				orientation: "horizontal"
			});

			//List
			var testArray = [{
				label: 'c++',
				value: 'c++'
			}, {
				label: 'java',
				value: 'java'
			}, {
				label: 'php',
				value: 'php'
			}, {
				label: 'coldfusion',
				value: 'coldfusion'
			}, {
				label: 'javascript',
				value: 'javascript'
			}, {
				label: 'asp',
				value: 'asp'
			}, {
				label: 'ruby',
				value: 'ruby'
			}, {
				label: 'python',
				value: 'python'
			}, {
				label: 'c',
				value: 'c'
			}, {
				label: 'scala',
				value: 'scala'
			}, {
				label: 'groovy',
				value: 'groovy'
			}, {
				label: 'haskell',
				value: 'haskell'
			}, {
				label: 'perl',
				value: 'perl'
			}];
			var list = $("#list");
			var input = $('#testinput');
			list.wijlist({
				selected: function (event, ui) {
					var selectedItem = ui.item;
					var str = selectedItem.label;
					input.val(str);

				}
			});
			//list.wijlist('load');
			list.wijlist('setItems', testArray);
			list.wijlist('renderList');
			list.wijlist('refreshSuperPanel');
			input.bind("keydown.wijcombobox", function (event) {
				var keyCode = $.ui.keyCode;
				switch (event.keyCode) {
					case keyCode.UP:
						list.wijlist('previous', event);
						// prevent moving cursor to beginning of text field in some browsers
						event.preventDefault();
						break;
					case keyCode.DOWN:
						if (!list.is(':visible')) {
							list.show();
							return;
						}
						list.wijlist('next', event);
						// prevent moving cursor to end of text field in some browsers
						event.preventDefault();
						break;
					case keyCode.ENTER:
						event.preventDefault();
						list.wijlist('select', event);
						break;
					case keyCode.PAGE_UP:
						list.wijlist('previousPage');
						break;
					case keyCode.PAGE_DOWN:
						list.wijlist('nextPage');
						break;
					default:
						break;
				}
			});

			//Tree
			$("#tree").wijtree({
				showCheckBoxes: true
			});
			$("li.folder").wijtreenode("option", "collapsedIconClass", "ui-icon-folder-collapsed")
				.wijtreenode("option", "expandedIconClass", "ui-icon-folder-open");
			$("li.file").wijtreenode("option", "itemIconClass", "ui-icon-document");

			// Accordion
			$("#accordion").wijaccordion({ header: "h3" });

			// Tabs
			$('#tabs').wijtabs();

			// Combobox
			$("#tags").wijcombobox(
				{
					showingAnimation: { effect: "blind" },
					hidingAnimation: { effect: "blind" }
				}
			);
			// Dialog			
			$('#dialog').wijdialog({
				autoOpen: false,
				width: 600,
				buttons: {
					"Ok": function () {
						$(this).wijdialog("close");
					},
					"Cancel": function () {
						$(this).wijdialog("close");
					}
				}
			});

			// Dialog Link
			$('#dialog_link').click(function () {
				$('#dialog').wijdialog('open');
				return false;
			});

			// Expander
			$("#expander").wijexpander();

			//Form Decorator
			$(":input[type='text'],:input[type='password'],:input[type='textarea']").wijtextboxdecorator();
			$("#select1").wijdropdowndecorator();
			$(":input[type='radio']").wijradiobuttondecorator();
			$(":input[type='checkbox']").wijcheckboxdecorator();

			//Input
			$("#textbox1").wijinputdate({ dateFormat: 'T' });
			$("#textbox2").wijinputmask(
		{
			mask: '(999) 000-0000',
			hidePromptOnLeave: true
		});
			$("#textbox3").wijinputnumber(
		{
			type: 'numeric',
			minValue: 0,
			maxValue: 1000,
			value: 2.324,
			decimalPlaces: 3,
			showSpinner: true
		});

			//Pager
			$("#pager").wijpager({ pageCount: 150, pageIndex: 40, mode: "numericFirstLast" });

			// Datepicker
			$('#datepicker').wijcalendar();

			// Slider
			$('#slider').wijslider({
				range: true,
				values: [17, 67]
			});

			// Progressbar
			$("#progressbar").wijprogressbar({
				value: 20
			});

			//Splitter
			$("#vsplitter").wijsplitter({ orientation: "vertical" });

			//SuperPanel
			$('#superPanel').wijsuperpanel();

			//Tooltip
			$("[title]").wijtooltip();

			//wizard
			$("#pages").wijwizard();

			//hover states on the static widgets
			$('#dialog_link, ul#icons li').hover(
					function () { $(this).addClass('ui-state-hover'); },
					function () { $(this).removeClass('ui-state-hover'); }
				);
		});
	</script>
	<style type="text/css">
		/*demo page css*/
		body
		{
			font: 62.5% "Trebuchet MS" , sans-serif;
			margin: 50px;
		}
		.fakewindowcontain
		{
			width: 300px;
		}
		.demoHeaders
		{
			margin-top: 2em;
		}
		#dialog_link
		{
			padding: .4em 1em .4em 20px;
			text-decoration: none;
			position: relative;
		}
		#dialog_link span.ui-icon
		{
			margin: 0 5px 0 0;
			position: absolute;
			left: .2em;
			top: 50%;
			margin-top: -8px;
		}
		ul#icons
		{
			margin: 0;
			padding: 0;
		}
		ul#icons li
		{
			margin: 2px;
			position: relative;
			padding: 4px 0;
			cursor: pointer;
			float: left;
			list-style: none;
		}
		ul#icons span.ui-icon
		{
			float: left;
			margin: 0 4px;
		}
		#list
		{
			width: 200px;
			height: 150px;
		}
		
		#vsplitter, #hsplitter
		{
			width: 200px;
			height: 200px;
		}
		.elements ul
		{
			padding: 8px 0 0 8px;
			margin: 0px;
			width: 840px;
			float: left;
			position: relative;
			zoom: 1;
		}
		
		.elements ul li
		{
			background: #fff;
			color: #fff;
			font-weight: 900;
			height: 70px;
			margin: 0 8px 8px 0;
			padding: 0;
			padding-top: 62px;
			position: relative;
			text-align: center;
			width: 132px;
			text-shadow: 1px 1px 2px #000000;
		}
		
		.elements li
		{
			float: left;
			list-style: none;
		}
		
		#slider
		{
			width: 300px;
		}
	</style>
</head>
<body>
	<h1>
		Welcome to Wijmo!</h1>
	<p>
		We have leveraged the power of jQuery and jQuery UI to build a set of widgets that
		are feature-rich and easy to get started with. Wijmo widgets are all fully themed
		and theme-able. Each widget utilizes the jQuery UI CSS Framework and Themeroller-ready.
		JQuery and jQuery UI are the defacto JavaScript libraries and have the strongest
		community of web developers in the world. Wijmo is following in the footsteps of
		the experts that built and use jQuery.
	</p>
	<!-- Accordion -->
	<h2 class="demoHeaders">
		Accordion</h2>
	<div id="accordion">
		<div>
			<h3>
				<a href="#">First</a></h3>
			<div>
				Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
		</div>
		<div>
			<h3>
				<a href="#">Second</a></h3>
			<div>
				Phasellus mattis tincidunt nibh.</div>
		</div>
		<div>
			<h3>
				<a href="#">Third</a></h3>
			<div>
				Nam dui erat, auctor a, dignissim quis.</div>
		</div>
	</div>
	<!-- Datepicker -->
	<h2 class="demoHeaders">
		Calendar</h2>
	<div id="datepicker">
	</div>
	<!-- Charts -->
	<h2 class="demoHeaders">
		Charts</h2>
	<h3>
		Bar Chart</h3>
	<div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 600px;
		height: 400px">
	</div>
	<h3>
		Pie Chart</h3>
	<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 600px;
		height: 400px">
	</div>
	<h3>
		Line Chart</h3>
	<div id="wijlinechartDefault" class="ui-widget ui-widget-content ui-corner-all" style="width: 600px;
		height: 300px">
	</div>
	<!-- Combobox -->
	<h2 class="demoHeaders">
		Combobox</h2>
	<select id="tags">
		<option value="c++">c++</option>
		<option value="java">java</option>
		<option value="php">php</option>
		<option value="coldfusion">coldfusion</option>
		<option value="javascript">javascript</option>
		<option value="asp">asp</option>
		<option value="ruby">ruby</option>
		<option value="python">python</option>
		<option value="c">c</option>
		<option value="scala">scala</option>
		<option value="groovy">groovy</option>
		<option value="haskell">haskell</option>
		<option value="perl">perl</option>
	</select>
	<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
	<h2 class="demoHeaders">
		Dialog</h2>
	<p>
		<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin">
		</span>Open Dialog</a></p>
	<h2 class="demoHeaders">
		Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
	<div style="position: relative; width: 500px; height: 200px; padding: 1% 4%; overflow: hidden;"
		class="fakewindowcontain">
		<p>
			Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur
			consequat.
		</p>
		<p>
			Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices
			ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue,
			gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
		</p>
		<p>
			Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque
			quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing
			elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla
			nec tortor. Donec id elit quis purus consectetur consequat.
		</p>
		<p>
			Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices
			ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue,
			gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus,
			pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.
		</p>
		<p>
			Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit.
			Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec
			tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus.
			Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.
		</p>
		<p>
			Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate
			ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada
			ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem
			ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae,
			pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur
			consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis
			ornare, ultrices ut, nisi.
		</p>
		<!-- ui-dialog -->
		<div class="ui-overlay">
			<div class="ui-widget-overlay">
			</div>
			<div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute;
				left: 50px; top: 30px;">
			</div>
		</div>
		<div style="position: absolute; width: 280px; height: 130px; left: 50px; top: 30px;
			padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
			<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
					incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
					exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
		</div>
	</div>
	<!-- ui-dialog -->
	<div id="dialog" title="Dialog Title">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
			exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</div>
	<!-- Expander -->
	<h2 class="demoHeaders">
		Expander</h2>
	<div id="expander">
		<h3>
			Header</h3>
		<div>
			Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna.
			Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris sapien,
			cursus in.
		</div>
	</div>
	<!-- Expander -->
	<h2 class="demoHeaders">
		Form Decorator</h2>
	<h3>
		Input</h3>
	<input id="textbox" type="text" />
	<h3>
		Textarea</h3>
	<textarea id="area" rows="5" cols="50"></textarea>
	<h3>
		Dropdown</h3>
	<select id="select1">
		<optgroup label="A-G">
			<option>A</option>
			<option selected="selected">B</option>
			<option>C</option>
			<option>D</option>
			<option>E</option>
			<option>F</option>
			<option>G</option>
		</optgroup>
		<optgroup label="H-M">
			<option>H</option>
			<option>I</option>
			<option>J</option>
			<option>K</option>
			<option>L</option>
			<option>M</option>
		</optgroup>
	</select>
	<h3>
		Checkbox</h3>
	<input id="checkbox1" type="checkbox" /><label for="checkbox1">Check Box</label>
	<h3 style="clear: both;">
		Radio</h3>
	<input type="radio" name="radiobutton1" id="radio1" /><label for="radio1">Radio</label>
	<!-- Grid -->
	<h2 class="demoHeaders">
		Grid</h2>
	<table id="grid" style="width: 100%">
		<thead>
			<tr>
				<th width="5%">
					Number
				</th>
				<th width="6%">
					Nationality
				</th>
				<th width="24%">
					Player
				</th>
				<th width="8%">
					Position
				</th>
				<th width="8%">
					Handedness
				</th>
				<th width="8%">
					Age
				</th>
				<th width="11%">
					Acquired
				</th>
				<th width="30%" class="unsortable">
					Birthplace
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>
					27
				</th>
				<td>
					Canada
				</td>
				<td>
					Adams, Craig
				</td>
				<td>
					RW
				</td>
				<td>
					R
				</td>
				<td>
					32
				</td>
				<td>
					2009
				</td>
				<td>
					Seria, Brunei
				</td>
			</tr>
			<tr>
				<th>
					43
				</th>
				<td>
					Canada
				</td>
				<td>
					Boucher, Philippe
				</td>
				<td>
					D
				</td>
				<td>
					R
				</td>
				<td>
					36
				</td>
				<td>
					2008
				</td>
				<td>
					Saint-Apollinaire, Quebec
				</td>
			</tr>
			<tr>
				<th>
					24
				</th>
				<td>
					Canada
				</td>
				<td>
					Cooke, Matt
				</td>
				<td>
					LW
				</td>
				<td>
					L
				</td>
				<td>
					30
				</td>
				<td>
					2008
				</td>
				<td>
					Belleville, Ontario
				</td>
			</tr>
			<tr>
				<th>
					87
				</th>
				<td>
					Canada
				</td>
				<td>
					Crosby, Sidney (C)
				</td>
				<td>
					C
				</td>
				<td>
					L
				</td>
				<td>
					21
				</td>
				<td>
					2005
				</td>
				<td>
					Cole Harbour, Nova Scotia
				</td>
			</tr>
			<tr>
				<th>
					1
				</th>
				<td>
					United States
				</td>
				<td>
					Curry, John
				</td>
				<td>
					G
				</td>
				<td>
					L
				</td>
				<td>
					25
				</td>
				<td>
					2007
				</td>
				<td>
					Shorewood, Minnesota
				</td>
			</tr>
			<tr>
				<th>
					9
				</th>
				<td>
					Canada
				</td>
				<td>
					Dupuis, Pascal
				</td>
				<td>
					W
				</td>
				<td>
					L
				</td>
				<td>
					30
				</td>
				<td>
					2008
				</td>
				<td>
					Laval, Quebec
				</td>
			</tr>
			<tr>
				<th>
					7
				</th>
				<td>
					United States
				</td>
				<td>
					Eaton, Mark
				</td>
				<td>
					D
				</td>
				<td>
					L
				</td>
				<td>
					32
				</td>
				<td>
					2006
				</td>
				<td>
					Wilmington, Delaware
				</td>
			</tr>
			<tr>
				<th>
					26
				</th>
				<td>
					Ukraine
				</td>
				<td>
					Fedotenko, Ruslan
				</td>
				<td>
					LW
				</td>
				<td>
					L
				</td>
				<td>
					30
				</td>
				<td>
					2008
				</td>
				<td>
					Kiev, U.S.S.R.
				</td>
			</tr>
			<tr>
				<th>
					29
				</th>
				<td>
					Canada
				</td>
				<td>
					Fleury, Marc-Andre
				</td>
				<td>
					G
				</td>
				<td>
					L
				</td>
				<td>
					24
				</td>
				<td>
					2003
				</td>
				<td>
					Sorel, Quebec
				</td>
			</tr>
			<tr>
				<th>
					32
				</th>
				<td>
					Canada
				</td>
				<td>
					Garon, Mathieu
				</td>
				<td>
					G
				</td>
				<td>
					R
				</td>
				<td>
					31
				</td>
				<td>
					2009
				</td>
				<td>
					Chandler, Quebec
				</td>
			</tr>
			<tr>
				<th>
					2
				</th>
				<td>
					United States
				</td>
				<td>
					Gill, Hal
				</td>
				<td>
					D
				</td>
				<td>
					L
				</td>
				<td>
					34
				</td>
				<td>
					2008
				</td>
				<td>
					Concord, Massachusetts
				</td>
			</tr>
			<tr>
				<th>
					28
				</th>
				<td>
					Canada
				</td>
				<td>
					Godard, Eric
				</td>
				<td>
					RW
				</td>
				<td>
					R
				</td>
				<td>
					29
				</td>
				<td>
					2008
				</td>
				<td>
					Vernon, British Columbia
				</td>
			</tr>
			<tr>
				<th>
					3
				</th>
				<td>
					United States
				</td>
				<td>
					Goligoski, Alex
				</td>
				<td>
					D
				</td>
				<td>
					L
				</td>
				<td>
					23
				</td>
				<td>
					2004
				</td>
				<td>
					Grand Rapids, Minnesota
				</td>
			</tr>
			<tr>
				<th>
					55
				</th>
				<td>
					Russia
				</td>
				<td>
					Gonchar, Sergei (A)
				</td>
				<td>
					D
				</td>
				<td>
					L
				</td>
				<td>
					35
				</td>
				<td>
					2005
				</td>
				<td>
					Chelyabinsk, U.S.S.R.
				</td>
			</tr>
			<tr>
				<th>
					13
				</th>
				<td>
					United States
				</td>
				<td>
					Guerin, Bill
				</td>
				<td>
					RW
				</td>
				<td>
					R
				</td>
				<td>
					38
				</td>
				<td>
					2009
				</td>
				<td>
					Worcester, Massachusetts
				</td>
			</tr>
			<tr>
				<th>
					42
				</th>
				<td>
					Canada
				</td>
				<td>
					Jeffrey, Dustin
				</td>
				<td>
					C
				</td>
				<td>
					L
				</td>
				<td>
					21
				</td>
				<td>
					2007
				</td>
				<td>
					Sarnia, Ontario
				</td>
			</tr>
			<tr>
				<th>
					48
				</th>
				<td>
					Canada
				</td>
				<td>
					Kennedy, Tyler
				</td>
				<td>
					C
				</td>
				<td>
					R
				</td>
				<td>
					22
				</td>
				<td>
					2004
				</td>
				<td>
					Sault Ste. Marie, Ontario
				</td>
			</tr>
			<tr>
				<th>
					14
				</th>
				<td>
					Canada
				</td>
				<td>
					Kunitz, Chris
				</td>
				<td>
					LW
				</td>
				<td>
					L
				</td>
				<td>
					29
				</td>
				<td>
					2009
				</td>
				<td>
					Regina, Saskatchewan
				</td>
			</tr>
			<tr>
				<th>
					58
				</th>
				<td>
					Canada
				</td>
				<td>
					Letang, Kristopher
				</td>
				<td>
					D
				</td>
				<td>
					R
				</td>
				<td>
					22
				</td>
				<td>
					2005
				</td>
				<td>
					Montreal, Quebec
				</td>
			</tr>
			<tr>
				<th>
					65
				</th>
				<td>
					United States
				</td>
				<td>
					Lovejoy, Ben
				</td>
				<td>
					D
				</td>
				<td>
					R
				</td>
				<td>
					25
				</td>
				<td>
					2008
				</td>
				<td>
					Canaan, New Hampshire
				</td>
			</tr>
			<tr>
				<th>
					71
				</th>
				<td>
					Russia
				</td>
				<td>
					Malkin, Evgeni (A)
				</td>
				<td>
					C
				</td>
				<td>
					L
				</td>
				<td>
					22
				</td>
				<td>
					2004
				</td>
				<td>
					Magnitogorsk, U.S.S.R.
				</td>
			</tr>
			<tr>
				<th>
					14
				</th>
				<td>
					Canada
				</td>
				<td>
					Minard, Chris
				</td>
				<td>
					C
				</td>
				<td>
					L
				</td>
				<td>
					27
				</td>
				<td>
					2007
				</td>
				<td>
					Owen Sound, Ontario
				</td>
			</tr>
			<tr>
				<th>
					44
				</th>
				<td>
					United States
				</td>
				<td>
					Orpik, Brooks
				</td>
				<td>
					D
				</td>
				<td>
					L
				</td>
				<td>
					28
				</td>
				<td>
					2001
				</td>
				<td>
					San Francisco, California
				</td>
			</tr>
			<tr>
				<th>
					81
				</th>
				<td>
					Slovakia
				</td>
				<td>
					Satan, Miroslav
				</td>
				<td>
					RW
				</td>
				<td>
					L
				</td>
				<td>
					34
				</td>
				<td>
					2008
				</td>
				<td>
					Topo??any, Czechoslovakia
				</td>
			</tr>
			<tr>
				<th>
					4
				</th>
				<td>
					United States
				</td>
				<td>
					Scuderi, Rob
				</td>
				<td>
					D
				</td>
				<td>
					L
				</td>
				<td>
					30
				</td>
				<td>
					1998
				</td>
				<td>
					Syosset, New York
				</td>
			</tr>
			<tr>
				<th>
					11
				</th>
				<td>
					Canada
				</td>
				<td>
					Staal, Jordan
				</td>
				<td>
					C
				</td>
				<td>
					L
				</td>
				<td>
					20
				</td>
				<td>
					2006
				</td>
				<td>
					Thunder Bay, Ontario
				</td>
			</tr>
			<tr>
				<th>
					17
				</th>
				<td>
					Czech Republic
				</td>
				<td>
					Sykora, Petr
				</td>
				<td>
					RW
				</td>
				<td>
					L
				</td>
				<td>
					32
				</td>
				<td>
					2007
				</td>
				<td>
					Plzeň, Czechoslovakia
				</td>
			</tr>
			<tr>
				<th>
					22
				</th>
				<td>
					United States
				</td>
				<td>
					Taffe, Jeff
				</td>
				<td>
					LW
				</td>
				<td>
					L
				</td>
				<td>
					28
				</td>
				<td>
					2007
				</td>
				<td>
					Hastings, Minnesota
				</td>
			</tr>
			<tr>
				<th>
					25
				</th>
				<td>
					Canada
				</td>
				<td>
					Talbot, Maxime
				</td>
				<td>
					C
				</td>
				<td>
					L
				</td>
				<td>
					25
				</td>
				<td>
					2002
				</td>
				<td>
					LeMoyne, Quebec
				</td>
			</tr>
			<tr>
				<th>
					15
				</th>
				<td>
					Canada
				</td>
				<td>
					Zigomanis, Michael
				</td>
				<td>
					C
				</td>
				<td>
					R
				</td>
				<td>
					28
				</td>
				<td>
					2008
				</td>
				<td>
					Toronto, Ontario
				</td>
			</tr>
		</tbody>
	</table>
	<!-- Input -->
	<h2 class="demoHeaders">
		Input</h2>
	<h3>
		Date</h3>
	<input type="text" id="textbox1" />
	<h3>
		Mask</h3>
	<input type="text" id="textbox2" />
	<h3>
		Number</h3>
	<input type="text" id="textbox3" />
	<!-- List -->
	<h2 class="demoHeaders">
		List</h2>
	<div id="list">
	</div>
	<!-- Menu -->
	<h2 class="demoHeaders">
		Menu</h2>
	<ul id="menu1">
		<li><a><span class="ui-icon ui-icon-arrowthick-1-w ui-wijmenu-icon-left"></span><span>
			Menu1</span></a></li>
		<li><a><span class="ui-icon ui-icon-arrowrefresh-1-s ui-wijmenu-icon-left"></span><span>
			Menu2</span></a>
			<ul>
				<li><a>submenu1</a></li>
				<li><a>submenu2</a>
					<ul>
						<li><a>submenu21</a></li>
						<li><a>submenu22</a></li>
						<li><a>submenu23</a></li>
						<li><a>submenu24</a></li>
						<li><a>submenu25</a></li>
					</ul>
				</li>
				<li><a>submenu3</a></li>
				<li><a>submenu4</a>
					<ul>
						<li><a>submenu41</a></li>
						<li><a>submenu42</a></li>
						<li><a>submenu43</a></li>
						<li><a>submenu44</a></li>
						<li><a>submenu45</a></li>
						<li><a>submenu46</a></li>
						<li><a>submenu47</a></li>
						<li><a>submenu48</a></li>
					</ul>
				</li>
				<li><a>submenu5</a></li>
				<li><a>submenu6</a></li>
				<li><a>submenu7</a></li>
				<li><a>submenu8</a></li>
			</ul>
		</li>
		<li><a><span class="ui-icon ui-icon-comment ui-wijmenu-icon-left"></span><span>Menu3</span></a></li>
		<li><a><span class="ui-icon ui-icon-person ui-wijmenu-icon-left"></span><span>Menu4</span></a></li>
		<li><a><span class="ui-icon ui-icon-trash ui-wijmenu-icon-left"></span><span>Menu5</span></a></li>
		<li><a><span class="ui-icon ui-icon-bookmark ui-wijmenu-icon-left"></span><span>Menu6</span></a>
			<ul>
				<li><a>submenu61</a></li>
				<li><a>submenu62</a></li>
				<li><a>submenu63</a></li>
				<li><a>submenu64</a></li>
				<li><a>submenu65</a></li>
				<li><a>submenu66</a></li>
				<li><a>submenu67</a></li>
				<li><a>submenu68</a></li>
				<li><a>submenu69</a></li>
			</ul>
		</li>
		<li><a><span class="ui-icon ui-icon-clock ui-wijmenu-icon-left"></span><span>Menu7</span></a></li>
		<li><a><span class="ui-icon ui-icon-minusthick ui-wijmenu-icon-left"></span><span>Menu8</span></a></li>
	</ul>
	<!-- Pager -->
	<h2 class="demoHeaders">
		Pager</h2>
	<div id="pager">
	</div>
	<!-- Progressbar -->
	<h2 class="demoHeaders">
		Progressbar</h2>
	<div id="progressbar">
	</div>
	<!-- Slider -->
	<h2 class="demoHeaders">
		Slider</h2>
	<div id="slider">
	</div>
	<!-- Splitter -->
	<h2 class="demoHeaders">
		Splitter</h2>
	<div id="vsplitter">
		<div>
			<h3>panel1</h3>
		</div>
		<div>
			<h3>panel2</h3>
		</div>
	</div>
	<!-- SuperPanel -->
	<h2 class="demoHeaders">
		SuperPanel</h2>
	<div id="superPanel" style="width: 300px; height: 300px;">
		<div class="elements">
			<ul>
				<li style="background: none repeat scroll 0% 0% activeborder;"><span>ActiveBorder</span>
				</li>
				<li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span>
				</li>
				<li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% appworkspace;"><span>AppWorkspace</span>
				</li>
				<li style="background: none repeat scroll 0% 0% buttonface;"><span>Control</span>
				</li>
				<li style="background: none repeat scroll 0% 0% buttonshadow;"><span>ControlDark</span>
				</li>
				<li style="background: none repeat scroll 0% 0% threeddarkshadow;"><span>ControlDarkDark</span>
				</li>
				<li style="background: none repeat scroll 0% 0% buttonface;"><span>ControlLight</span>
				</li>
				<li style="background: none repeat scroll 0% 0% buttonhighlight;"><span>ControlLightLight</span>
				</li>
				<li style="background: none repeat scroll 0% 0% buttontext;"><span>ControlText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% background;"><span>Desktop</span>
				</li>
				<li style="background: none repeat scroll 0% 0% graytext;"><span>GrayText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% highlight;"><span>Highlight</span>
				</li>
				<li style="background: none repeat scroll 0% 0% highlighttext;"><span>HighlightText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% highlight;"><span>HotTrack</span>
				</li>
				<li style="background: none repeat scroll 0% 0% inactiveborder;"><span>InactiveBorder</span>
				</li>
				<li style="background: none repeat scroll 0% 0% inactivecaption;"><span>InactiveCaption</span>
				</li>
				<li style="background: none repeat scroll 0% 0% inactivecaptiontext;"><span>InactiveCaptionText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% infobackground;"><span>Info</span>
				</li>
				<li style="background: none repeat scroll 0% 0% infotext;"><span>InfoText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% menu;"><span>Menu</span> </li>
				<li style="background: none repeat scroll 0% 0% menutext;"><span>MenuText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% scrollbar;"><span>ScrollBar</span>
				</li>
				<li style="background: none repeat scroll 0% 0% window;"><span>Window</span> </li>
				<li style="background: none repeat scroll 0% 0% windowframe;"><span>WindowFrame</span>
				</li>
				<li style="background: none repeat scroll 0% 0% windowtext;"><span>WindowText</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Transparent;"><span>Transparent</span>
				</li>
				<li style="background: none repeat scroll 0% 0% AliceBlue;"><span>AliceBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% AntiqueWhite;"><span>AntiqueWhite</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Aqua;"><span>Aqua</span> </li>
				<li style="background: none repeat scroll 0% 0% Aquamarine;"><span>Aquamarine</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Azure;"><span>Azure</span> </li>
				<li style="background: none repeat scroll 0% 0% Beige;"><span>Beige</span> </li>
				<li style="background: none repeat scroll 0% 0% Bisque;"><span>Bisque</span> </li>
				<li style="background: none repeat scroll 0% 0% Black;"><span>Black</span> </li>
				<li style="background: none repeat scroll 0% 0% BlanchedAlmond;"><span>BlanchedAlmond</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Blue;"><span>Blue</span> </li>
				<li style="background: none repeat scroll 0% 0% BlueViolet;"><span>BlueViolet</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Brown;"><span>Brown</span> </li>
				<li style="background: none repeat scroll 0% 0% BurlyWood;"><span>BurlyWood</span>
				</li>
				<li style="background: none repeat scroll 0% 0% CadetBlue;"><span>CadetBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Chartreuse;"><span>Chartreuse</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Chocolate;"><span>Chocolate</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Coral;"><span>Coral</span> </li>
				<li style="background: none repeat scroll 0% 0% CornflowerBlue;"><span>CornflowerBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Cornsilk;"><span>Cornsilk</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Crimson;"><span>Crimson</span> </li>
				<li style="background: none repeat scroll 0% 0% Cyan;"><span>Cyan</span> </li>
				<li style="background: none repeat scroll 0% 0% DarkBlue;"><span>DarkBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkCyan;"><span>DarkCyan</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkGoldenrod;"><span>DarkGoldenrod</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkGray;"><span>DarkGray</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkGreen;"><span>DarkGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkKhaki;"><span>DarkKhaki</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkMagenta;"><span>DarkMagenta</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkOliveGreen;"><span>DarkOliveGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkOrange;"><span>DarkOrange</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkOrchid;"><span>DarkOrchid</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkRed;"><span>DarkRed</span> </li>
				<li style="background: none repeat scroll 0% 0% DarkSalmon;"><span>DarkSalmon</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkSeaGreen;"><span>DarkSeaGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkSlateBlue;"><span>DarkSlateBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkSlateGray;"><span>DarkSlateGray</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkTurquoise;"><span>DarkTurquoise</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DarkViolet;"><span>DarkViolet</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DeepPink;"><span>DeepPink</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DeepSkyBlue;"><span>DeepSkyBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% DimGray;"><span>DimGray</span> </li>
				<li style="background: none repeat scroll 0% 0% DodgerBlue;"><span>DodgerBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Firebrick;"><span>Firebrick</span>
				</li>
				<li style="background: none repeat scroll 0% 0% FloralWhite;"><span>FloralWhite</span>
				</li>
				<li style="background: none repeat scroll 0% 0% ForestGreen;"><span>ForestGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Fuchsia;"><span>Fuchsia</span> </li>
				<li style="background: none repeat scroll 0% 0% Gainsboro;"><span>Gainsboro</span>
				</li>
				<li style="background: none repeat scroll 0% 0% GhostWhite;"><span>GhostWhite</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Gold;"><span>Gold</span> </li>
				<li style="background: none repeat scroll 0% 0% Goldenrod;"><span>Goldenrod</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Gray;"><span>Gray</span> </li>
				<li style="background: none repeat scroll 0% 0% Green;"><span>Green</span> </li>
				<li style="background: none repeat scroll 0% 0% GreenYellow;"><span>GreenYellow</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Honeydew;"><span>Honeydew</span>
				</li>
				<li style="background: none repeat scroll 0% 0% HotPink;"><span>HotPink</span> </li>
				<li style="background: none repeat scroll 0% 0% IndianRed;"><span>IndianRed</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Indigo;"><span>Indigo</span> </li>
				<li style="background: none repeat scroll 0% 0% Ivory;"><span>Ivory</span> </li>
				<li style="background: none repeat scroll 0% 0% Khaki;"><span>Khaki</span> </li>
				<li style="background: none repeat scroll 0% 0% Lavender;"><span>Lavender</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LavenderBlush;"><span>LavenderBlush</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LawnGreen;"><span>LawnGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LemonChiffon;"><span>LemonChiffon</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightBlue;"><span>LightBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightCoral;"><span>LightCoral</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightCyan;"><span>LightCyan</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightGoldenrodYellow;"><span>LightGoldenrodYellow</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightGrey;"><span>LightGray</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightGreen;"><span>LightGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightPink;"><span>LightPink</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightSalmon;"><span>LightSalmon</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightSeaGreen;"><span>LightSeaGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightSkyBlue;"><span>LightSkyBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightSlateGray;"><span>LightSlateGray</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightSteelBlue;"><span>LightSteelBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% LightYellow;"><span>LightYellow</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Lime;"><span>Lime</span> </li>
				<li style="background: none repeat scroll 0% 0% LimeGreen;"><span>LimeGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Linen;"><span>Linen</span> </li>
				<li style="background: none repeat scroll 0% 0% Magenta;"><span>Magenta</span> </li>
				<li style="background: none repeat scroll 0% 0% Maroon;"><span>Maroon</span> </li>
				<li style="background: none repeat scroll 0% 0% MediumAquamarine;"><span>MediumAquamarine</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumBlue;"><span>MediumBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumOrchid;"><span>MediumOrchid</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumPurple;"><span>MediumPurple</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumSeaGreen;"><span>MediumSeaGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumSlateBlue;"><span>MediumSlateBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumSpringGreen;"><span>MediumSpringGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumTurquoise;"><span>MediumTurquoise</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MediumVioletRed;"><span>MediumVioletRed</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MidnightBlue;"><span>MidnightBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MintCream;"><span>MintCream</span>
				</li>
				<li style="background: none repeat scroll 0% 0% MistyRose;"><span>MistyRose</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Moccasin;"><span>Moccasin</span>
				</li>
				<li style="background: none repeat scroll 0% 0% NavajoWhite;"><span>NavajoWhite</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Navy;"><span>Navy</span> </li>
				<li style="background: none repeat scroll 0% 0% OldLace;"><span>OldLace</span> </li>
				<li style="background: none repeat scroll 0% 0% Olive;"><span>Olive</span> </li>
				<li style="background: none repeat scroll 0% 0% OliveDrab;"><span>OliveDrab</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Orange;"><span>Orange</span> </li>
				<li style="background: none repeat scroll 0% 0% OrangeRed;"><span>OrangeRed</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Orchid;"><span>Orchid</span> </li>
				<li style="background: none repeat scroll 0% 0% PaleGoldenrod;"><span>PaleGoldenrod</span>
				</li>
				<li style="background: none repeat scroll 0% 0% PaleGreen;"><span>PaleGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% PaleTurquoise;"><span>PaleTurquoise</span>
				</li>
				<li style="background: none repeat scroll 0% 0% PaleVioletRed;"><span>PaleVioletRed</span>
				</li>
				<li style="background: none repeat scroll 0% 0% PapayaWhip;"><span>PapayaWhip</span>
				</li>
				<li style="background: none repeat scroll 0% 0% PeachPuff;"><span>PeachPuff</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Peru;"><span>Peru</span> </li>
				<li style="background: none repeat scroll 0% 0% Pink;"><span>Pink</span> </li>
				<li style="background: none repeat scroll 0% 0% Plum;"><span>Plum</span> </li>
				<li style="background: none repeat scroll 0% 0% PowderBlue;"><span>PowderBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Purple;"><span>Purple</span> </li>
				<li style="background: none repeat scroll 0% 0% Red;"><span>Red</span> </li>
				<li style="background: none repeat scroll 0% 0% RosyBrown;"><span>RosyBrown</span>
				</li>
				<li style="background: none repeat scroll 0% 0% RoyalBlue;"><span>RoyalBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% SaddleBrown;"><span>SaddleBrown</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Salmon;"><span>Salmon</span> </li>
				<li style="background: none repeat scroll 0% 0% SandyBrown;"><span>SandyBrown</span>
				</li>
				<li style="background: none repeat scroll 0% 0% SeaGreen;"><span>SeaGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% SeaShell;"><span>SeaShell</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Sienna;"><span>Sienna</span> </li>
				<li style="background: none repeat scroll 0% 0% Silver;"><span>Silver</span> </li>
				<li style="background: none repeat scroll 0% 0% SkyBlue;"><span>SkyBlue</span> </li>
				<li style="background: none repeat scroll 0% 0% SlateBlue;"><span>SlateBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% SlateGray;"><span>SlateGray</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Snow;"><span>Snow</span> </li>
				<li style="background: none repeat scroll 0% 0% SpringGreen;"><span>SpringGreen</span>
				</li>
				<li style="background: none repeat scroll 0% 0% SteelBlue;"><span>SteelBlue</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Tan;"><span>Tan</span> </li>
				<li style="background: none repeat scroll 0% 0% Teal;"><span>Teal</span> </li>
				<li style="background: none repeat scroll 0% 0% Thistle;"><span>Thistle</span> </li>
				<li style="background: none repeat scroll 0% 0% Tomato;"><span>Tomato</span> </li>
				<li style="background: none repeat scroll 0% 0% Turquoise;"><span>Turquoise</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Violet;"><span>Violet</span> </li>
				<li style="background: none repeat scroll 0% 0% Wheat;"><span>Wheat</span> </li>
				<li style="background: none repeat scroll 0% 0% White;"><span>White</span> </li>
				<li style="background: none repeat scroll 0% 0% WhiteSmoke;"><span>WhiteSmoke</span>
				</li>
				<li style="background: none repeat scroll 0% 0% Yellow;"><span>Yellow</span> </li>
				<li style="background: none repeat scroll 0% 0% YellowGreen;"><span>YellowGreen</span>
				</li>
				<li style=""><span>ButtonFace</span> </li>
				<li style=""><span>ButtonHighlight</span> </li>
				<li style=""><span>ButtonShadow</span> </li>
				<li style="background: none repeat scroll 0% 0% activecaption;"><span>GradientActiveCaption</span>
				</li>
				<li style="background: none repeat scroll 0% 0% inactivecaption;"><span>GradientInactiveCaption</span>
				</li>
				<li style="background: none repeat scroll 0% 0% menu;"><span>MenuBar</span> </li>
				<li style="background: none repeat scroll 0% 0% highlighttext;"><span>MenuHighlight</span>
				</li>
			</ul>
		</div>
	</div>
	<!-- Tabs -->
	<h2 class="demoHeaders">
		Tabs</h2>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">First</a></li>
			<li><a href="#tabs-2">Second</a></li>
			<li><a href="#tabs-3">Third</a></li>
		</ul>
		<div id="tabs-1">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
			exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
		<div id="tabs-2">
			Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
			ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
			bibendum.</div>
		<div id="tabs-3">
			Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi
			urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
			ullamcorper augue.</div>
	</div>
	<!-- Tooltip -->
	<h2 class="demoHeaders">
		Tooltip</h2>
	<h3>
		<a title="Tooltip Woo!" href="#">Anchor</a>
	</h3>
	<!-- Wizard -->
	<h2 class="demoHeaders">
		Wizard</h2>
	<div id="pages">
		<ul>
			<li>
				<h1>
					Step 1</h1>
				This is the first step</li>
			<li>
				<h1>
					Step 2</h1>
				This is the second step</li>
			<li>
				<h1>
					Step 3</h1>
				This is the third step</li>
			<li>
				<h1>
					Step 4</h1>
				This is the fourth step</li>
			<li>
				<h1>
					Step 5</h1>
				This is the fifth step</li>
			<li>
				<h1>
					Step 6</h1>
				This is the sixth step</li>
			<li>
				<h1>
					Step 7</h1>
				This is the seventh step</li>
			<li>
				<h1>
					Step 8</h1>
				This is the eighth step</li>
			<li>
				<h1>
					Step 9</h1>
				This is the nineth step</li>
		</ul>
		<div>
			<p>
				Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
				arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
				Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
				leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
				tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
				pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
				Nunc tristique tempus lectus.</p>
		</div>
		<div>
			<p>
				Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
				massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
				luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
				aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
				in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
				nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
				convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
				felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
		</div>
		<div>
			<p>
				Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
				pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
				Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
				nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
				pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
				enim, pretium nec, feugiat nec, luctus a, lacus.</p>
			<p>
				Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
				ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing
				velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula
				faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
				sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor
				ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
				commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit
				hendrerit.</p>
		</div>
		<div>
			<h4>
				Studio Enterprise</h4>
			<p>
				Seven platforms, hundreds of controls, one studio. Build awesome desktop, Web, and
				mobile apps with our tools for WinForms, WPF, ASP.NET, Silverlight, iPhone, Mobile,
				and ActiveX.</p>
		</div>
		<div>
			<h4>
				Studio for WinForms</h4>
			<p>
				Over 65 .NET controls, including the ones you can't get anywhere else. Studio for
				WinForms can handle anything, from a grid with a million rows to a chart with unlimited
				points.</p>
		</div>
		<div>
			<h4>
				Studio for WPF</h4>
			<p>
				Studio for WPF offers everything from advanced data binding to rich data visualizations
				included in grids, schedulers, charts, reports, and more.</p>
		</div>
		<div>
			<h4>
				Studio for ASP.NET AJAX</h4>
			<p>
				Do more with less code. Over 45 styled, supercharged, and easy-to-use controls built
				on Web standards including AJAX, CSS, and XHTML.</p>
		</div>
		<div>
			<h4>
				Studio for Silverlight</h4>
			<p>
				Industrial strength Silverlight controls you cannot find anywhere else. Download
				ComponentOne Studio? for Silverlight, play, and watch the Web shine.</p>
		</div>
		<div>
			<h4>
				Studio for iPhone</h4>
			<p>
				Use your existing ASP.NET skill set and take your Web apps to the iPhone. ComponentOne
				Studio? for iPhone gives you the iPhone UX.</p>
		</div>
	</div>
	<!-- Tree -->
	<h2 class="demoHeaders">
		Tree</h2>
	<div>
		<ul id="tree">
			<li class="folder"><a><span>Folder 1</span></a>
				<ul>
					<li class="folder"><a><span>Folder 1.1</span></a>
						<ul>
							<li class="file"><a><span>File 1.1</span></a></li>
							<li class="file"><a><span>File 1.2</span></a></li>
							<li class="file"><a><span>File 1.3</span></a></li>
							<li class="file"><a><span>File 1.4</span></a></li>
							<li class="file"><a><span>File 1.5</span></a></li>
						</ul>
					</li>
					<li class="file"><a><span>File 1.2</span></a></li>
					<li class="file"><a><span>File 1.3</span></a></li>
					<li class="file"><a><span>File 1.4</span></a></li>
					<li class="file"><a><span>File 1.5</span></a></li>
				</ul>
			</li>
			<li class="folder"><a><span>Folder 2</span></a>
				<ul>
					<li class="file"><a><span>File 2.1</span></a></li>
					<li class="file"><a><span>File 2.2</span></a></li>
					<li class="file"><a><span>File 2.3</span></a></li>
					<li class="file"><a><span>File 2.4</span></a></li>
					<li class="file"><a><span>File 2.5</span></a></li>
				</ul>
			</li>
			<li class="folder"><a><span>Folder 3</span></a>
				<ul>
					<li class="file"><a><span>File 3.1</span></a></li>
					<li class="file"><a><span>File 3.2</span></a></li>
					<li class="file"><a><span>File 3.3</span></a></li>
					<li class="file"><a><span>File 3.4</span></a></li>
					<li class="file"><a><span>File 3.5</span></a></li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- Icons -->
	<h2 class="demoHeaders">
		Framework Icons (content color preview)</h2>
	<ul id="icons" class="ui-widget ui-helper-clearfix">
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span
			class="ui-icon ui-icon-triangle-2-n-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span
			class="ui-icon ui-icon-triangle-2-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span
			class="ui-icon ui-icon-arrowthick-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span
			class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span
			class="ui-icon ui-icon-arrowthick-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span
			class="ui-icon ui-icon-arrowthick-1-se"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span
			class="ui-icon ui-icon-arrowthick-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span
			class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span
			class="ui-icon ui-icon-arrowthick-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span
			class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span
			class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span
			class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span
			class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span
			class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span
			class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span
			class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span
			class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span
			class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span
			class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span
			class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span
			class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span
			class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span
			class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span
			class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span
			class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span
			class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span
			class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span
			class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span
			class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span
			class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span
			class="ui-icon ui-icon-transferthick-e-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span
			class="ui-icon ui-icon-folder-collapsed"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span
			class="ui-icon ui-icon-circle-triangle-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span
			class="ui-icon ui-icon-circle-triangle-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span
			class="ui-icon ui-icon-circle-triangle-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span
			class="ui-icon ui-icon-circle-triangle-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span
			class="ui-icon ui-icon-circle-arrow-e"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span
			class="ui-icon ui-icon-circle-arrow-s"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span
			class="ui-icon ui-icon-circle-arrow-w"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span
			class="ui-icon ui-icon-circle-arrow-n"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span
			class="ui-icon ui-icon-circle-zoomout"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check">
		</span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span
			class="ui-icon ui-icon-circlesmall-plus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span
			class="ui-icon ui-icon-circlesmall-minus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span
			class="ui-icon ui-icon-circlesmall-close"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span
			class="ui-icon ui-icon-squaresmall-plus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span
			class="ui-icon ui-icon-squaresmall-minus"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span
			class="ui-icon ui-icon-squaresmall-close"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span
			class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span
			class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span
			class="ui-icon ui-icon-grip-solid-vertical"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span
			class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span
			class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
		<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span
			class="ui-icon ui-icon-grip-diagonal-se"></span></li>
	</ul>
	<!-- Highlight / Error -->
	<h2 class="demoHeaders">
		Highlight / Error</h2>
	<div class="ui-widget">
		<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
			<p>
				<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
				<strong>Hey!</strong> Sample ui-state-highlight style.</p>
		</div>
	</div>
	<br />
	<div class="ui-widget">
		<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
			<p>
				<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
				<strong>Alert:</strong> Sample ui-state-error style.</p>
		</div>
	</div>
</body>
</html>
